<template>
  <div class="tabbar_item" @click="goToPage()">

    <div v-if="!isActived">
      <slot name="tabbar_item_icon"></slot>
    </div>
    <div v-else>
      <slot name="tabbar_item_icon_active"></slot>
    </div>

    <!--class写在slot上的话，会直接被替换掉的-->
    <!--动态修改颜色，所以不用这种      :class="{active:isActived}"-->
    <!--过于复杂的话，提取到计算属性中   :style="{color:isActived?activedColor:'',}"-->
    <div  :style="activedStyle">
      <slot name="tabbar_item_name"></slot>
    </div>

  </div>
</template>

<script>
    export default {
        name: "TabBarItem",
      data(){
          return {
            // isActived:true, // 写死的状态：true false
          }
      },
      props:{
          path:{
            type:String,
            default:'cart'
          },
        activedColor:{
            type:String,
          default:'red',
        }
      },
      methods:{
          // 跳转路由
        goToPage(){
          this.$router.push(`/${this.path}`)
        }
      },
      computed:{
          isActived(){
            // console.log(this.$route);
            // 获取当前是否是激活状态
            return this.$route.path.indexOf(this.path)>-1
          },
        activedStyle(){
            return this.isActived?{color:this.activedColor}:{}
        },
      }
    }
</script>

<style scoped lang="less">
  .tabbar_item{
    flex:1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 49px; // 最优高度为49px
    font-size: 14px;

    img{
      width: 24px;
      height: 24px;
      margin-bottom: 3px;
    }

    .active{
      /*修改actived颜色为动态传入的*/
      // color:red;
    }
  }
</style>
